<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Alerts</h1>
                        <small>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Basic examples</h2>
                            <small class="card-subtitle">Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., <code>.alert-success</code>)</small>
                        </div>

                        <div class="card-block">
                            <div class="alert alert-success" role="alert">
                                <strong>Well done!</strong> You successfully read this important alert message.
                            </div>
                            <div class="alert alert-info" role="alert">
                                <strong>Heads up!</strong> This alert needs your attention, but it&#39;s not super important.
                            </div>
                            <div class="alert alert-warning" role="alert">
                                <strong>Warning!</strong> Better check yourself, you&#39;re not looking too good.
                            </div>
                            <div class="alert alert-danger" role="alert">
                                <strong>Oh snap!</strong> Change a few things up and try submitting again.
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Link color</h2>
                            <small class="card-subtitle">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</small>
                        </div>

                        <div class="card-block">
                            <div class="alert alert-success" role="alert">
                                <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
                            </div>
                            <div class="alert alert-info" role="alert">
                                <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it&#39;s not super important.
                            </div>
                            <div class="alert alert-warning" role="alert">
                                <strong>Warning!</strong> Better check yourself, you&#39;re <a href="#" class="alert-link">not looking too good</a>.
                            </div>
                            <div class="alert alert-danger" role="alert">
                                <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Additional content</h2>
                            <small class="card-subtitle">Alerts can also contain additional HTML elements like headings and paragraphs.</small>
                        </div>

                        <div class="card-block">
                            <div class="alert alert-success" role="alert">
                                <h4 class="alert-heading">Well done!</h4>
                                <p class="mb-0">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Dismissing</h2>
                            <small class="card-subtitle">Alerts have <code>dismiss</code> option. Enabling it will show close button to the right of the alert.</small>
                        </div>

                        <div class="card-block">
                            <div class="alert alert-success alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>

                                Well done! You successfully read <a href="#" class="alert-link">this important alert message</a>.
                            </div>

                            <div class="alert alert-info alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>

                                Heads up! This <a href="#" class="alert-link">alert needs your attention</a>, but it&#39;s not super important.
                            </div>

                            <div class="alert alert-warning alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>

                                Warning! Better check yourself, you&#39;re <a href="#" class="alert-link">not looking too good</a>.
                            </div>

                            <div class="alert alert-danger alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>

                                Oh snap! <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
                            </div>
                        </div>
                    </div>
                </div>

                
            </div></template>